body{
    font-family: Helvetica,sans-serif;
    margin:0;
    padding:0;
}

div{
    position: relative;
    margin:0px;
    padding:0px;
}

p,h1,h2,h3{
    margin:0px;
    padding:0px
}

a{
    text-decoration: none;
}

a img {
    border: medium none;
}

ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
}

li{
    margin: 0px;
    padding: 0px;
}

/********* STYLING ***********/
/*****************************/

#body{
    text-align: center;
    /*background: url('../img/style/bg.png') repeat-x top;
    background-color: #f4efd5;*/
}

#main-con{
    width:980px;
    overflow: auto;
    margin:0px auto;
    z-index: 3
}

/************* Home ****************/
/***********************************/

/*****BREADCUMB******/
#breadcumb{
    min-width: 980px;
    position:fixed;
    top:0;
    width: 100%;
    z-index: 2
}

#main-content{
    overflow: auto;
    text-align: justify;
    width: 100%;
}

/*****MAIN TOP******/

#main-top{
    width: 100%;
    min-height: 150px;
    overflow: auto;
    margin-bottom: 40px;
}

#topmenu{
    margin-top: 100px;
    padding: 10px;
    background-color: #bfd1d5;
    border-radius: 10px;
}

#topmenu-ul{
    
    height: 70px;
}

.topmenu-li{
    float: left;
    margin:0 10px;
    padding: 10px;
}

#topmenu-active,.topmenu-li:hover{
    background: #d7e6e9;
    border-radius:10px;
}

#topmenu-active .topmenu-d2,
#topmenu-active .topmenu-d3,
.topmenu-li:hover .topmenu-d2,
.topmenu-li:hover .topmenu-d2 a:visited,
.topmenu-li:hover .topmenu-d3{
    color:#000;
}

.topmenu-d1{
    text-align: left;
}

.topmenu-d2{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 18pt;
    line-height: 30px;
    color:#505050;
}

.topmenu-d2 a:visited,
.topmenu-d2 a
{
    color:#505050;
}

.topmenu-d3{
    text-transform: capitalize;
    line-height: 20px;
    font-size: 8pt;
    color:#898989;
}

/*****CLEFT******/

#main-cleft{
    float: left;
    width: 670px;
}

.post-wrapper{
    box-shadow: 0px 1px 1px #717171;
}

.post-top{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    margin: 0;
    overflow: auto;
    padding: 8px;
}

.post-thumbnail {
    float: left;
    height: 180px;
    margin: 0 15px 0 0;
    overflow: hidden;
    width: 270px;
}

.post-content{
    float: left;
    width: 360px;
}

.post-meta{
    color: #666666;
    font-size: 13px;
    line-height: 18px;
    padding-bottom: 5px;
}

.post-title{
    font-size: 28px;
    line-height: 30px;
    text-align: left;
    width: 360px;
    padding: 2px 0 0;
    font-family: Helvetica,sans-serif;
}

.post-title a {
    color: #000;
    text-decoration: none;
}

.post-title a:hover{
    text-decoration: underline;
}

.post-snapshot{
    margin-top: 5px;
    color: #666666;
    padding: 0;
}

.post-snapshot p.read-more-p{
    margin-top: 5px;
}

.post-snapshot a.read-more-a,
.post-snapshot a.read-more-a:visited{
    color:#3A6E79
}

.post-snapshot a.read-more-a:hover{
    text-decoration: underline;
}

.post-bottom{
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 0 0 20px;
    padding: 8px 10px 10px;
    position: relative;
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #F2F2F2 #CCCCCC #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-style: solid;
    border-width: 3px 1px 1px;
    color: #666666;
    font-size: 13px;
    line-height: 18px;
    text-transform: capitalize;
}

/*****POST NAVIGATION****/
#post-navigation{
    text-align: center;
}

#post-earlier-wrap,#post-later-wrap{
    background: #BFD1D5;
    border-radius: 10px 10px 10px 10px;
    height: 45px;
    margin-right: 5px;
    float:right;
    border: 2px solid #BFD1D5;
    color:#323232;
}

#post-later-wrap:hover,
#post-earlier-wrap:hover,
#post-later-wrap:hover a,
#post-earlier-wrap:hover a{
    background: #D7E6E9;
    color:#000;
}

#post-earlier-wrap a,#post-later-wrap a{
    text-transform: uppercase;
    font-weight: bold;
    line-height: 45px;
    vertical-align: middle;
    margin:0 17px;
    color:#323232;
}


/*****VIEW POST****/
#post-view .post-top{
    padding: 10px 20px;
}

.pv-title{
    font-size: 30px;
    line-height: 40px;
    vertical-align: middle;
}

.pv-title a,.pv-title a:visited{
    color:#898989;
}

.pv-title a:hover{
    color:#252525;
}

.pv-image{
    margin-top: 20px;
}

.pv-image .main-image{
    text-align: center;
}
.pv-gallery{
    margin-top: 10px;
}

.pv-content{
    margin-top: 20px;
    font-size: 100%;
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
}

#post-view .post-bottom{
    padding-left: 20px;
}

/**** IMAGE PREVIEW *****/
#img-preview-bg{
    background: url('../img/style/img-preview-bg.png') repeat;
    display: block;;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1100;
    height: 100%;
    width: 100%;
}

#img-preview-con{
    display: block;
    left:50%;
    top:50%;
    opacity: 1;
    margin: 0;
    position:fixed;
    z-index: 1101;
    
}

#img-preview-wrap{
    padding:10px;
    box-shadow: 0 0 20px 5px #666;
	-webkit-box-shadow: 0 0 20px 5px #666;
    background: #FFF;
    z-index: 1103;
    display: inline;
}

#img-preview-img{
    margin:0;
    padding:0;
    position: relative;
}

#img-preview-close{
    position: absolute;
    width: 29px;
    height: 29px;
    top:-16px;
    right:-13px;
    background: url('../img/style/close-button.png') no-repeat;
    cursor: pointer;
}

#img-preview-bottom{
    z-index: 1102;
    display: inline;
    position: absolute;
    top:0;
    left:0;
}

/*****CRIGHT******/

#main-cright{
    float: right;
    width: 300px;
}

#mcright-wrapper{
    margin-left: 20px;
}

.cr-wrapper{
    margin-bottom: 40px;
}

.cr-title{
    background-image: url("../img/style/cright-title-bg.gif");
    border-top: 3px solid #333333;
    margin-bottom: 0;
    padding: 5px 10px 5px;
    text-transform: uppercase;
}

.cr-title p{
    font-size: 16pt;
    font-weight: bold;
}

.cr-content{
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom: 1px dotted #CCCCCC;
    border-left: 1px dotted #CCCCCC;
    border-right: 1px dotted #CCCCCC;
    margin: 0;
    color:#3a6e79;
    padding: 0;
}

.cr-content ul{
    list-style: none outside none;
}

.cr-content ul li{
    border-bottom: 1px dotted #CCCCCC;
    border-color: #CCCCCC;
    clear: both;
    display: block;
    margin: 0 10px;
    overflow: auto;
    padding: 10px 0;
    text-transform: capitalize;
}

.cr-content ul li a:visited{
    color:#3a6e79;
}

.cr-content ul li a:hover{
    text-decoration: underline;
}

/**** MAIN BOTTTOM ****/
#main-bottom{
    height: 70px;
}


/**** UNDER CONSTRUCTION *****/
#under-construction{
    text-align: center;
}
#under-construction p{
    font-weight: bold;
    font-size: 30px;
}

/********* Control Panel ***********/
/***********************************/

/****topstatus****/
#topstatus{
    width:100%;
    height: 30px;
    text-align: right;
    background-color: #A7C942;
}

#topstatus p{
    font-family: Helvetica,sans-serif;
    color:#FFF;
    padding-right: 10px;
    font-weight: bold;
    line-height: 30px;
    vertical-align: middle;
}

#topstatus a{
    font-family: Helvetica,sans-serif;
    color:#FFF;
}

/****header****/
#header-con{
    height:150px;
    overflow: auto;
}


li.cpmenu-li{
    float:left;
    margin:0px 10px;
    width: 221px;
    border:2px solid #98BF21;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.cpmenu-d1{
    padding:10px;
}

/****content****/
#content-con{
    min-height: 500px;
    border:2px solid #98BF21;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin:10px;
    overflow: auto;
}

#content-wrap{
    margin:40px;
}

#content-flash{
    text-align: left;
}

#content-notif{
    background-color:#FBE6F2;
    border: 1px solid #D893A1;
    color: #333333;
    padding: 10px;
}

#content-title{
    text-align: left;
    padding: 10px 0px;;    
}

#content-title p{
    color:#252525;
    font-size: 20pt;
    font-family: Arial,Helvetica,sans-serif;
}

.hor-line{
    border-bottom: 2px solid #98BF21;
}

.content-field{
    text-align: left;
}

/****** Field ********/
.p-wrapper,#form-submit{
    font-size: 13px;
    line-height: 20px;
    padding:0px;
    margin:25px 0 0;
}

.p-wrapper input{
    width: 540px;
    font-size: 16px;
    padding: 6px;
}

.p-wrapper select{
    width: 554px;
    font-size: 16px;
    padding: 6px
}

span.field.label {
    line-height: 30px;
    min-height: 30px;
    padding-left: 305px;
    position: relative;
}

span.field {
    background: none repeat scroll 0 0 #E3E5E7;
    border-radius: 5px 5px 5px 5px;
    display: block;
    padding: 5px;
}

span.field label {
    left: 15px;
    position: absolute;
    font-size: 18px;
    font-family: Arial,sans-serif;
}

.field-separator{
    height: 20px;
}

/****** USER MENU *********/
#add-user,#add-article,#add-category{
    text-align: right;
    margin-top: 10px;
}

/****** LIST USER *********/
#table-user{
    margin-top: 20px;
    width: 100%;
    border-collapse: collapse;
}

#table-user tr, #table-user td{
    border-collapse: collapse;
    border: 1px solid #98BF21;
}


.tr-title{
    background-color: #A7C942;
}

.tr-title td{
    color:#FFF;
    padding: 4px 10px;
}

.td-no{
    width: 30px;
}

.td-role{
    width: 50px
}

.td-name,.td-username,.td-action{
    padding: 4px 10px;
}

.tr-round{
    background-color: #EAF2D3;
}

/******** LIST ARTICLE *********/
#table-article{
    margin-top: 20px;
    width: 100%;
    border-collapse: collapse;
}

#table-article tr, #table-article td{
    border-collapse: collapse;
    border: 1px solid #98BF21;
}

/******** LIST CATEGORY *********/
#table-category{
    margin-top: 20px;
    width: 100%;
    border-collapse: collapse;
}

#table-category tr, #table-category td{
    border-collapse: collapse;
    border: 1px solid #98BF21;
}

/******** LIST CATEGORY *********/
#table-image{
    width: 100%;
    border-collapse: collapse;
}

#table-image tr, #table-image td{
    border-collapse: collapse;
    border: 1px solid #98BF21;
    vertical-align: top;
    text-align: center;
}

#table-image .td-image img{
    margin:10px 0px;
}